<template>
	<view class="container">
		<view class="content-box">
			<timelineItem v-for="item in infoList" :key="item.id" :leftTime="item.appointDate">
				<view class="tripItem">
					<view class="title">
						<view>
							{{ item.appointStoreName }}
							<text style="
                  margin-left: 10rpx;
                  color: rgb(255, 85, 0);
                  font-size: 24rpx;
                " v-if="item.appointStatus === 1">已预约</text>
							<text style="
                  margin-left: 10rpx;
                  color: rgb(255, 85, 0);
                  font-size: 24rpx;
                " v-if="item.appointStatus === 2">已分诊</text>
							<text style="
                  margin-left: 10rpx;
                  color: rgb(255, 85, 0);
                  font-size: 24rpx;
                " v-if="item.appointStatus === 3">预约已取消</text>
						</view>
						<view>
							<u-button v-if="item.appointStatus === 1" text="取消预约" color="#2E75E8" size="mini"
								type="info" @click="cancelMethod(item)"></u-button>
							<evaluateComplate v-if="item.appointStatus === 2" :appointStoreId="item.appointStoreId"
								:doctorId="item.doctorId" :kid="item.id">
							</evaluateComplate>
						</view>
					</view>
					<view class="tips">
						<view>{{ item.appointDate }},您已成功预约{{ item.appointStoreName }}
						</view>
						<view>预约时间段:{{ item.appointTime }}</view>
						<view>预约医生:{{ item.doctorName }}</view>
						<view>预约序号:{{ item.appointNo }}</view>
					</view>
				</view>
			</timelineItem>
		</view>
		<view class="empty-box" v-if='!infoList.length'>
			<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png">
			</u-empty>
		</view>
	</view>
</template>
<script>
	import timeline from "@/pages-center/components/chenbin-timeline/timeLine.vue";
	import timelineItem from "@/pages-center/components/chenbin-timeline/timelineItem.vue";
	import {
		recordList,
		cancelAppoint,
	} from "@/api/axios/MakeAnAppointmentCenter.js";
	import evaluateComplate from "./evaluateComplate/index.vue";
	export default {
		components: {
			timeline,
			timelineItem,
			evaluateComplate,
		},
		data() {
			return {
				openId: "",
				customerId: "",
				infoList: [],
				doctorId: "",
				storeId: "",
			};
		},
		methods: {
			cancelMethod(item) {
				cancelAppoint({
					id: item.id,
					consultantId: item.customerId,
					triageType: item.appointType,
				}).then((res) => {
					uni.showToast({
						icon: "none",
						title: "取消预约成功",
						duration: 2000,
					});
					recordList({
						params: {
							customerId: this.customerId,
						},
					}).then((res) => {
						this.infoList = res;
					});
				});
			},
			evaluateMethod(item) {
				this.storeId = item.appointStoreId;
				this.doctorId = item.doctorId;
			},
		},
		onLoad() {
			this.openId = uni.getStorageSync("openId");
			this.customerId = uni.getStorageSync("customerId");
			recordList({
				params: {
					customerId: this.customerId,
				},
			}).then((res) => {
				this.infoList = res;
			});
		},
	};
</script>
<style lang="scss">
	@import "./index.scss";
</style>